<body class="layout-boxed">

    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">会员与非会员一天内共享单车借车时间分布</h3>
        </div>
        <div class="box-body">
            <label>选择日期:</label>
            <input id="dateinput" type="date" value="2020-06-01"/>
            <button id="btn1" class="btn btn-block btn-success btn-sm" style="width: 5%">查询</button>
            <div id="main1" style="width: 100%; height: 650px;"></div>
        </div>
        <!-- /.box-body -->
    </div>

    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">会员与非会员在指定时间内的使用数据</h3>
        </div>
        <div class="box-body">
            <!-- Date and time range -->
            <div class="form-group">
                <label>选择时间范围:</label>
                <div class="input-group">
                    <div class="input-group-addon">
                        <i class="fa fa-clock-o"></i>
                    </div>
                    <input type="text" class="form-control pull-right" id="reservationtime">
                </div>
                <button id="btn2" class="btn btn-block btn-success btn-sm" style="width: 5%">查询</button>
                <!-- /.input group -->
            </div>
            <!-- /.form group -->
            <div id="main2" style="width: 100%; height: 300px;"></div>
            <div id="main3" style="width: 100%; height: 300px;"></div>
            <div id="main4" style="width: 100%; height: 300px;"></div>
        </div>
        <!-- /.box-body -->
    </div>


    <script type="text/javascript">
        var myChart1 = echarts.init(document.getElementById('main1'));
        var myChart2 = echarts.init(document.getElementById('main2'));
        var myChart3 = echarts.init(document.getElementById('main3'));
        var myChart4 = echarts.init(document.getElementById('main4'));
        var dayPerMin=["0:00","0:01","0:02","0:03","0:04","0:05","0:06","0:07","0:08","0:09","0:10","0:11","0:12","0:13","0:14","0:15","0:16","0:17","0:18","0:19","0:20","0:21","0:22","0:23","0:24","0:25","0:26","0:27","0:28","0:29","0:30","0:31","0:32","0:33","0:34","0:35","0:36","0:37","0:38","0:39","0:40","0:41","0:42","0:43","0:44","0:45","0:46","0:47","0:48","0:49","0:50","0:51","0:52","0:53","0:54","0:55","0:56","0:57","0:58","0:59","1:00","1:01","1:02","1:03","1:04","1:05","1:06","1:07","1:08","1:09","1:10","1:11","1:12","1:13","1:14","1:15","1:16","1:17","1:18","1:19","1:20","1:21","1:22","1:23","1:24","1:25","1:26","1:27","1:28","1:29","1:30","1:31","1:32","1:33","1:34","1:35","1:36","1:37","1:38","1:39","1:40","1:41","1:42","1:43","1:44","1:45","1:46","1:47","1:48","1:49","1:50","1:51","1:52","1:53","1:54","1:55","1:56","1:57","1:58","1:59","2:00","2:01","2:02","2:03","2:04","2:05","2:06","2:07","2:08","2:09","2:10","2:11","2:12","2:13","2:14","2:15","2:16","2:17","2:18","2:19","2:20","2:21","2:22","2:23","2:24","2:25","2:26","2:27","2:28","2:29","2:30","2:31","2:32","2:33","2:34","2:35","2:36","2:37","2:38","2:39","2:40","2:41","2:42","2:43","2:44","2:45","2:46","2:47","2:48","2:49","2:50","2:51","2:52","2:53","2:54","2:55","2:56","2:57","2:58","2:59","3:00","3:01","3:02","3:03","3:04","3:05","3:06","3:07","3:08","3:09","3:10","3:11","3:12","3:13","3:14","3:15","3:16","3:17","3:18","3:19","3:20","3:21","3:22","3:23","3:24","3:25","3:26","3:27","3:28","3:29","3:30","3:31","3:32","3:33","3:34","3:35","3:36","3:37","3:38","3:39","3:40","3:41","3:42","3:43","3:44","3:45","3:46","3:47","3:48","3:49","3:50","3:51","3:52","3:53","3:54","3:55","3:56","3:57","3:58","3:59","4:00","4:01","4:02","4:03","4:04","4:05","4:06","4:07","4:08","4:09","4:10","4:11","4:12","4:13","4:14","4:15","4:16","4:17","4:18","4:19","4:20","4:21","4:22","4:23","4:24","4:25","4:26","4:27","4:28","4:29","4:30","4:31","4:32","4:33","4:34","4:35","4:36","4:37","4:38","4:39","4:40","4:41","4:42","4:43","4:44","4:45","4:46","4:47","4:48","4:49","4:50","4:51","4:52","4:53","4:54","4:55","4:56","4:57","4:58","4:59","5:00","5:01","5:02","5:03","5:04","5:05","5:06","5:07","5:08","5:09","5:10","5:11","5:12","5:13","5:14","5:15","5:16","5:17","5:18","5:19","5:20","5:21","5:22","5:23","5:24","5:25","5:26","5:27","5:28","5:29","5:30","5:31","5:32","5:33","5:34","5:35","5:36","5:37","5:38","5:39","5:40","5:41","5:42","5:43","5:44","5:45","5:46","5:47","5:48","5:49","5:50","5:51","5:52","5:53","5:54","5:55","5:56","5:57","5:58","5:59","6:00","6:01","6:02","6:03","6:04","6:05","6:06","6:07","6:08","6:09","6:10","6:11","6:12","6:13","6:14","6:15","6:16","6:17","6:18","6:19","6:20","6:21","6:22","6:23","6:24","6:25","6:26","6:27","6:28","6:29","6:30","6:31","6:32","6:33","6:34","6:35","6:36","6:37","6:38","6:39","6:40","6:41","6:42","6:43","6:44","6:45","6:46","6:47","6:48","6:49","6:50","6:51","6:52","6:53","6:54","6:55","6:56","6:57","6:58","6:59","7:00","7:01","7:02","7:03","7:04","7:05","7:06","7:07","7:08","7:09","7:10","7:11","7:12","7:13","7:14","7:15","7:16","7:17","7:18","7:19","7:20","7:21","7:22","7:23","7:24","7:25","7:26","7:27","7:28","7:29","7:30","7:31","7:32","7:33","7:34","7:35","7:36","7:37","7:38","7:39","7:40","7:41","7:42","7:43","7:44","7:45","7:46","7:47","7:48","7:49","7:50","7:51","7:52","7:53","7:54","7:55","7:56","7:57","7:58","7:59","8:00","8:01","8:02","8:03","8:04","8:05","8:06","8:07","8:08","8:09","8:10","8:11","8:12","8:13","8:14","8:15","8:16","8:17","8:18","8:19","8:20","8:21","8:22","8:23","8:24","8:25","8:26","8:27","8:28","8:29","8:30","8:31","8:32","8:33","8:34","8:35","8:36","8:37","8:38","8:39","8:40","8:41","8:42","8:43","8:44","8:45","8:46","8:47","8:48","8:49","8:50","8:51","8:52","8:53","8:54","8:55","8:56","8:57","8:58","8:59","9:00","9:01","9:02","9:03","9:04","9:05","9:06","9:07","9:08","9:09","9:10","9:11","9:12","9:13","9:14","9:15","9:16","9:17","9:18","9:19","9:20","9:21","9:22","9:23","9:24","9:25","9:26","9:27","9:28","9:29","9:30","9:31","9:32","9:33","9:34","9:35","9:36","9:37","9:38","9:39","9:40","9:41","9:42","9:43","9:44","9:45","9:46","9:47","9:48","9:49","9:50","9:51","9:52","9:53","9:54","9:55","9:56","9:57","9:58","9:59","10:00","10:01","10:02","10:03","10:04","10:05","10:06","10:07","10:08","10:09","10:10","10:11","10:12","10:13","10:14","10:15","10:16","10:17","10:18","10:19","10:20","10:21","10:22","10:23","10:24","10:25","10:26","10:27","10:28","10:29","10:30","10:31","10:32","10:33","10:34","10:35","10:36","10:37","10:38","10:39","10:40","10:41","10:42","10:43","10:44","10:45","10:46","10:47","10:48","10:49","10:50","10:51","10:52","10:53","10:54","10:55","10:56","10:57","10:58","10:59","11:00","11:01","11:02","11:03","11:04","11:05","11:06","11:07","11:08","11:09","11:10","11:11","11:12","11:13","11:14","11:15","11:16","11:17","11:18","11:19","11:20","11:21","11:22","11:23","11:24","11:25","11:26","11:27","11:28","11:29","11:30","11:31","11:32","11:33","11:34","11:35","11:36","11:37","11:38","11:39","11:40","11:41","11:42","11:43","11:44","11:45","11:46","11:47","11:48","11:49","11:50","11:51","11:52","11:53","11:54","11:55","11:56","11:57","11:58","11:59","12:00","12:01","12:02","12:03","12:04","12:05","12:06","12:07","12:08","12:09","12:10","12:11","12:12","12:13","12:14","12:15","12:16","12:17","12:18","12:19","12:20","12:21","12:22","12:23","12:24","12:25","12:26","12:27","12:28","12:29","12:30","12:31","12:32","12:33","12:34","12:35","12:36","12:37","12:38","12:39","12:40","12:41","12:42","12:43","12:44","12:45","12:46","12:47","12:48","12:49","12:50","12:51","12:52","12:53","12:54","12:55","12:56","12:57","12:58","12:59","13:00","13:01","13:02","13:03","13:04","13:05","13:06","13:07","13:08","13:09","13:10","13:11","13:12","13:13","13:14","13:15","13:16","13:17","13:18","13:19","13:20","13:21","13:22","13:23","13:24","13:25","13:26","13:27","13:28","13:29","13:30","13:31","13:32","13:33","13:34","13:35","13:36","13:37","13:38","13:39","13:40","13:41","13:42","13:43","13:44","13:45","13:46","13:47","13:48","13:49","13:50","13:51","13:52","13:53","13:54","13:55","13:56","13:57","13:58","13:59","14:00","14:01","14:02","14:03","14:04","14:05","14:06","14:07","14:08","14:09","14:10","14:11","14:12","14:13","14:14","14:15","14:16","14:17","14:18","14:19","14:20","14:21","14:22","14:23","14:24","14:25","14:26","14:27","14:28","14:29","14:30","14:31","14:32","14:33","14:34","14:35","14:36","14:37","14:38","14:39","14:40","14:41","14:42","14:43","14:44","14:45","14:46","14:47","14:48","14:49","14:50","14:51","14:52","14:53","14:54","14:55","14:56","14:57","14:58","14:59","15:00","15:01","15:02","15:03","15:04","15:05","15:06","15:07","15:08","15:09","15:10","15:11","15:12","15:13","15:14","15:15","15:16","15:17","15:18","15:19","15:20","15:21","15:22","15:23","15:24","15:25","15:26","15:27","15:28","15:29","15:30","15:31","15:32","15:33","15:34","15:35","15:36","15:37","15:38","15:39","15:40","15:41","15:42","15:43","15:44","15:45","15:46","15:47","15:48","15:49","15:50","15:51","15:52","15:53","15:54","15:55","15:56","15:57","15:58","15:59","16:00","16:01","16:02","16:03","16:04","16:05","16:06","16:07","16:08","16:09","16:10","16:11","16:12","16:13","16:14","16:15","16:16","16:17","16:18","16:19","16:20","16:21","16:22","16:23","16:24","16:25","16:26","16:27","16:28","16:29","16:30","16:31","16:32","16:33","16:34","16:35","16:36","16:37","16:38","16:39","16:40","16:41","16:42","16:43","16:44","16:45","16:46","16:47","16:48","16:49","16:50","16:51","16:52","16:53","16:54","16:55","16:56","16:57","16:58","16:59","17:00","17:01","17:02","17:03","17:04","17:05","17:06","17:07","17:08","17:09","17:10","17:11","17:12","17:13","17:14","17:15","17:16","17:17","17:18","17:19","17:20","17:21","17:22","17:23","17:24","17:25","17:26","17:27","17:28","17:29","17:30","17:31","17:32","17:33","17:34","17:35","17:36","17:37","17:38","17:39","17:40","17:41","17:42","17:43","17:44","17:45","17:46","17:47","17:48","17:49","17:50","17:51","17:52","17:53","17:54","17:55","17:56","17:57","17:58","17:59","18:00","18:01","18:02","18:03","18:04","18:05","18:06","18:07","18:08","18:09","18:10","18:11","18:12","18:13","18:14","18:15","18:16","18:17","18:18","18:19","18:20","18:21","18:22","18:23","18:24","18:25","18:26","18:27","18:28","18:29","18:30","18:31","18:32","18:33","18:34","18:35","18:36","18:37","18:38","18:39","18:40","18:41","18:42","18:43","18:44","18:45","18:46","18:47","18:48","18:49","18:50","18:51","18:52","18:53","18:54","18:55","18:56","18:57","18:58","18:59","19:00","19:01","19:02","19:03","19:04","19:05","19:06","19:07","19:08","19:09","19:10","19:11","19:12","19:13","19:14","19:15","19:16","19:17","19:18","19:19","19:20","19:21","19:22","19:23","19:24","19:25","19:26","19:27","19:28","19:29","19:30","19:31","19:32","19:33","19:34","19:35","19:36","19:37","19:38","19:39","19:40","19:41","19:42","19:43","19:44","19:45","19:46","19:47","19:48","19:49","19:50","19:51","19:52","19:53","19:54","19:55","19:56","19:57","19:58","19:59","20:00","20:01","20:02","20:03","20:04","20:05","20:06","20:07","20:08","20:09","20:10","20:11","20:12","20:13","20:14","20:15","20:16","20:17","20:18","20:19","20:20","20:21","20:22","20:23","20:24","20:25","20:26","20:27","20:28","20:29","20:30","20:31","20:32","20:33","20:34","20:35","20:36","20:37","20:38","20:39","20:40","20:41","20:42","20:43","20:44","20:45","20:46","20:47","20:48","20:49","20:50","20:51","20:52","20:53","20:54","20:55","20:56","20:57","20:58","20:59","21:00","21:01","21:02","21:03","21:04","21:05","21:06","21:07","21:08","21:09","21:10","21:11","21:12","21:13","21:14","21:15","21:16","21:17","21:18","21:19","21:20","21:21","21:22","21:23","21:24","21:25","21:26","21:27","21:28","21:29","21:30","21:31","21:32","21:33","21:34","21:35","21:36","21:37","21:38","21:39","21:40","21:41","21:42","21:43","21:44","21:45","21:46","21:47","21:48","21:49","21:50","21:51","21:52","21:53","21:54","21:55","21:56","21:57","21:58","21:59","22:00","22:01","22:02","22:03","22:04","22:05","22:06","22:07","22:08","22:09","22:10","22:11","22:12","22:13","22:14","22:15","22:16","22:17","22:18","22:19","22:20","22:21","22:22","22:23","22:24","22:25","22:26","22:27","22:28","22:29","22:30","22:31","22:32","22:33","22:34","22:35","22:36","22:37","22:38","22:39","22:40","22:41","22:42","22:43","22:44","22:45","22:46","22:47","22:48","22:49","22:50","22:51","22:52","22:53","22:54","22:55","22:56","22:57","22:58","22:59","23:00","23:01","23:02","23:03","23:04","23:05","23:06","23:07","23:08","23:09","23:10","23:11","23:12","23:13","23:14","23:15","23:16","23:17","23:18","23:19","23:20","23:21","23:22","23:23","23:24","23:25","23:26","23:27","23:28","23:29","23:30","23:31","23:32","23:33","23:34","23:35","23:36","23:37","23:38","23:39","23:40","23:41","23:42","23:43","23:44","23:45","23:46","23:47","23:48","23:49","23:50","23:51","23:52","23:53","23:54","23:55","23:56","23:57","23:58","23:59"]
        var numOfDay={"cusData":[7,3,3,3,3,3,5,11,10,8,3,5,0,5,4,4,5,2,7,9,5,8,3,6,4,3,4,6,5,0,3,6,5,3,7,1,0,5,1,0,4,7,4,5,3,8,2,0,1,0,0,4,4,4,2,0,12,1,0,0,4,1,0,0,0,1,0,6,3,3,1,0,0,1,0,2,2,4,1,0,1,0,0,3,3,3,4,3,5,2,0,3,1,0,0,3,4,5,1,0,0,3,5,1,0,0,0,0,0,0,0,1,0,1,0,0,3,0,3,2,2,2,1,0,3,0,1,0,0,0,0,0,4,0,3,0,3,1,0,3,3,0,1,0,0,0,1,0,0,1,0,0,3,0,1,0,0,2,3,1,0,0,0,0,0,5,2,1,0,0,0,0,0,2,2,0,0,0,0,0,0,1,0,2,1,0,0,0,0,1,0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,2,1,0,0,0,0,0,1,0,0,0,0,0,2,1,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,3,1,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,3,2,2,1,0,1,0,0,0,0,0,1,0,0,4,0,3,0,4,3,2,1,0,0,2,0,1,0,3,1,0,0,0,3,2,3,7,2,0,2,1,0,2,3,3,2,1,0,0,7,2,3,1,0,1,0,4,8,4,7,3,2,2,3,3,0,3,2,6,4,4,1,0,8,3,1,0,5,6,3,3,2,3,5,1,0,1,0,2,6,8,3,4,8,4,5,5,7,5,6,2,8,3,3,6,4,5,3,5,7,7,1,0,10,3,5,8,7,4,6,5,6,6,4,6,6,9,4,2,3,8,5,0,10,5,11,5,6,8,4,2,7,4,9,7,5,6,7,1,0,6,4,5,3,5,6,6,6,9,4,8,8,11,4,6,9,7,5,5,7,4,7,6,6,3,9,11,7,10,5,4,5,7,4,3,5,7,4,4,9,6,7,5,3,8,4,6,5,5,5,3,4,6,7,7,7,4,4,9,4,7,9,4,4,6,9,6,4,4,4,11,7,8,5,3,7,6,13,3,11,4,8,12,7,10,4,3,10,7,7,9,7,4,4,4,8,13,5,6,7,8,11,8,4,10,4,7,7,9,12,3,7,7,4,6,6,10,6,4,8,11,10,6,1,0,8,4,8,6,14,5,6,9,9,9,5,8,6,6,9,5,8,8,8,4,11,9,8,10,9,6,7,7,13,10,5,7,6,11,11,4,13,8,12,12,13,12,9,6,11,10,6,9,7,7,6,5,5,9,11,13,9,10,6,5,10,10,9,5,15,10,10,10,10,14,16,11,14,12,8,7,14,7,20,18,11,12,13,6,10,10,8,13,11,12,12,11,8,11,10,11,9,5,13,8,20,11,7,16,10,6,9,15,7,12,8,7,16,21,12,11,14,15,12,11,14,8,11,7,16,12,15,12,13,6,13,17,14,5,14,22,16,9,10,9,7,17,8,10,6,15,8,9,9,22,10,17,14,11,13,19,13,11,15,15,17,11,16,17,9,7,15,14,8,12,21,18,16,14,16,17,7,13,14,18,9,12,11,10,13,13,17,22,14,15,22,7,15,13,13,16,11,18,14,24,9,8,11,15,21,11,22,14,12,12,9,14,20,18,12,18,17,25,19,17,13,9,14,14,15,17,18,20,18,14,12,16,11,13,13,13,13,17,23,17,17,10,29,19,16,27,14,23,11,15,8,24,23,20,18,10,18,19,14,14,15,15,12,19,13,25,16,15,18,16,25,19,21,16,17,20,16,18,23,16,18,12,22,14,16,15,25,18,15,15,10,10,17,16,25,18,21,12,22,12,24,21,20,17,25,10,20,9,21,17,20,20,27,22,21,19,17,18,20,17,18,21,23,24,14,18,19,21,16,29,16,17,26,19,21,20,26,23,27,27,29,23,32,24,24,24,20,18,23,18,30,16,26,31,23,28,23,23,17,25,27,27,23,29,26,20,28,26,30,26,26,20,27,26,17,24,22,19,37,28,34,34,29,30,32,27,31,28,28,28,30,19,25,29,23,32,30,31,34,26,30,41,26,23,25,34,37,30,34,24,21,26,32,28,28,31,37,34,34,25,22,25,34,32,28,28,22,30,53,34,32,24,32,30,32,25,33,21,25,18,22,38,35,30,33,38,41,33,24,27,37,36,21,32,23,28,32,42,36,29,23,37,35,30,30,35,35,32,35,32,25,35,42,33,31,33,26,31,37,32,35,30,30,28,22,40,38,25,26,35,29,30,32,25,26,31,27,34,22,28,21,26,16,11,26,32,35,24,20,16,23,26,32,24,22,27,24,24,22,17,31,21,22,25,20,15,27,27,26,26,26,16,17,17,22,23,22,23,17,20,23,18,24,26,15,22,26,22,29,26,24,24,20,23,30,12,28,29,30,22,20,23,19,14,21,32,21,29,23,26,22,26,21,25,24,19,22,20,21,10,16,22,13,20,20,18,12,20,20,22,25,19,17,20,17,18,20,15,20,17,21,25,19,20,21,18,14,16,22,27,23,15,18,14,19,23,16,14,20,23,22,11,19,14,15,20,22,17,12,25,24,19,13,11,16,11,16,9,20,20,15,26,16,13,18,13,21,13,18,15,27,15,15,12,13,20,13,11,13,22,21,10,15,15,13,15,9,15,15,10,13,14,15,10,9,19,7,12,11,15,19,9,15,12,7,12,5,11,7,7,8,6,4,11,8,12,1,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"anuData":[8,9,7,5,4,5,7,8,3,2,12,6,8,3,7,4,6,3,6,5,13,8,4,7,8,7,5,5,6,5,6,7,3,3,6,6,8,6,3,5,5,6,8,5,2,4,1,0,2,5,5,5,3,4,3,7,7,4,3,5,2,3,1,0,0,2,3,3,5,2,2,2,3,4,5,3,6,3,3,3,7,5,6,2,4,4,6,2,4,3,2,1,0,4,3,2,2,4,3,5,3,1,0,3,4,2,2,3,3,2,4,4,2,5,0,1,0,3,4,2,1,0,4,3,4,1,0,2,3,6,2,3,2,6,6,5,4,2,1,0,1,0,0,0,2,4,0,3,0,3,2,1,0,0,0,0,2,3,1,0,0,0,0,0,0,2,4,1,0,0,2,1,0,0,1,0,0,1,0,1,0,0,3,2,4,1,0,0,2,1,0,3,3,5,0,1,0,0,1,0,0,0,0,1,0,1,0,2,0,2,2,0,1,0,0,0,0,0,1,0,0,4,0,0,2,3,2,0,3,1,0,0,3,3,0,0,0,0,2,0,1,0,0,2,1,0,0,0,0,0,1,0,3,1,0,0,3,1,0,0,0,4,2,2,1,0,0,0,0,0,2,2,1,0,0,0,2,2,1,0,2,0,1,0,1,0,1,0,0,2,2,0,3,3,2,1,0,3,2,5,2,1,0,0,0,0,3,1,0,2,1,0,0,1,0,1,0,6,1,0,3,2,3,5,5,3,7,4,7,3,1,0,2,5,6,3,3,3,0,1,0,3,4,4,3,8,7,4,5,8,4,5,8,5,7,10,6,10,5,7,9,10,9,5,4,13,14,8,5,8,9,10,7,13,7,14,11,13,11,16,12,14,16,19,17,14,11,17,13,20,12,17,8,16,22,20,21,20,20,17,20,23,19,22,23,19,17,17,22,14,20,13,22,17,15,12,17,15,16,14,16,16,28,16,13,27,20,19,16,18,16,25,16,28,18,26,23,27,18,19,22,19,23,23,23,28,31,34,26,24,29,27,29,23,20,32,23,26,27,31,35,20,18,27,28,24,23,26,33,21,24,23,24,20,32,25,24,28,33,36,32,19,21,34,30,25,30,24,31,48,28,31,33,29,28,31,46,21,32,27,33,33,29,37,22,28,19,29,34,35,29,28,27,33,26,35,39,31,37,39,24,32,27,31,33,32,29,31,27,30,23,22,24,27,32,28,23,19,24,34,27,24,26,18,26,21,28,15,30,22,21,31,32,31,31,27,32,21,21,32,29,31,26,20,26,29,19,32,29,25,23,27,24,29,43,25,31,31,37,34,31,24,24,22,27,29,33,24,27,23,26,16,34,20,26,27,22,35,33,28,14,21,23,27,26,24,26,32,38,18,23,14,26,35,23,21,19,20,21,22,28,31,21,22,32,34,23,30,35,16,27,25,35,27,25,25,27,20,22,23,28,33,25,26,27,27,29,31,22,30,25,22,25,36,32,31,27,24,27,26,27,26,23,26,34,18,15,30,21,24,25,23,19,29,29,21,23,46,29,32,30,40,21,29,36,24,30,26,29,24,19,17,25,30,28,34,28,21,27,38,27,35,39,25,29,22,31,32,32,34,35,36,19,27,20,27,34,30,31,29,28,26,18,32,36,27,37,27,25,34,24,29,39,32,33,30,32,22,27,26,25,29,46,42,41,28,33,35,32,28,36,39,41,34,37,27,33,43,27,34,44,36,34,42,47,21,36,40,31,28,37,43,36,30,41,43,31,38,31,36,36,28,28,36,43,39,31,40,52,37,41,32,42,36,30,31,38,28,47,31,36,32,33,36,34,35,41,43,35,40,35,48,43,43,35,35,49,42,38,41,42,37,43,34,41,42,42,48,43,47,42,30,33,36,29,35,30,27,35,28,31,30,27,40,42,38,44,19,35,47,31,33,37,46,45,31,41,39,33,38,37,31,51,42,46,34,48,33,35,37,40,37,34,35,43,37,43,36,33,41,44,37,46,47,33,45,40,48,42,32,45,41,53,46,43,47,30,46,39,39,44,51,38,32,42,41,40,30,33,42,39,43,50,39,58,33,49,48,42,51,38,54,36,39,43,48,31,42,46,43,45,36,40,43,37,43,44,44,51,34,59,45,39,35,47,42,46,49,41,37,37,47,51,47,38,47,50,53,38,42,34,50,58,54,50,44,60,39,43,58,53,53,53,49,49,53,62,56,52,61,60,54,49,47,51,57,52,49,53,53,60,54,59,49,50,59,57,52,50,48,43,48,60,52,57,56,45,59,64,59,64,61,57,57,50,58,57,59,60,59,54,60,60,49,63,82,67,51,76,72,58,61,65,69,59,61,72,62,63,70,68,63,72,73,54,57,60,56,61,67,60,51,62,63,59,74,78,67,71,59,69,62,65,59,69,71,80,65,70,66,61,85,75,66,79,47,71,56,62,60,74,72,76,63,66,78,86,67,83,65,65,66,65,53,68,81,58,66,69,91,81,82,63,74,61,75,81,65,80,78,64,69,63,65,59,71,71,57,72,63,56,63,72,60,62,71,75,67,60,68,55,74,82,55,57,65,65,65,42,73,56,67,69,67,61,52,58,71,68,69,60,81,52,41,57,63,56,38,62,62,52,57,40,59,46,71,49,51,42,61,53,51,48,43,43,48,45,53,49,38,42,55,54,46,47,52,46,45,45,55,44,40,59,46,33,41,50,47,41,45,39,35,40,32,42,59,35,50,36,44,64,45,44,33,44,42,40,35,40,43,51,38,41,51,47,34,39,40,42,35,47,49,40,20,32,36,41,32,46,24,29,34,37,36,32,28,24,30,38,38,24,32,31,27,33,43,41,24,32,29,27,26,35,24,41,46,37,30,22,31,34,19,37,27,35,25,22,26,33,20,26,21,32,28,23,21,22,25,22,32,19,18,18,16,36,19,26,20,24,16,29,23,18,25,18,27,29,21,19,19,21,22,21,21,25,18,24,18,13,18,14,14,22,27,26,23,24,18,19,28,21,19,16,25,13,14,12,11,11,21,18,19,13,17,12,12,20,16,15,10,12,19,19,17,17,17,19,9,10,21,11,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]}

        option1 = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    snap: true,
                    label: {
                        backgroundColor: '#6a7985'
                    }
                },
                formatter: function (params) {
                    //console.log(params);
                    var firstParams = params[0];
                    var result = "<b>" + firstParams.name + "</b> <br/>";
                    var sum = 0;
                    var flag = false;
                    for(x in params){
                        if(x > 0) flag = true;
                        result += params[x].seriesName + ":" + params[x].value + "<br/>";
                        sum += params[x].value;
                        //console.log(result, sum);
                    }
                    if(flag) result += "总数:" + sum;
                    return result;
                }
            },
            legend: {
                data: ['非会员', '会员']

            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: dayPerMin
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '非会员',
                    type: 'line',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'top'
                    },
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: numOfDay.cusData
                },
                {
                    name: '会员',
                    type: 'line',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'top'
                    },
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: numOfDay.anuData
                }
            ],
            dataZoom : [
                {
                    type: 'slider',
                    show: true,
                    start: 0,
                    end: 100,
                    handleSize: 8,
                    brushSelect:false
                },
                {
                    type: 'inside',
                    start: 0,
                    end: 100
                }
            ]
        };


        myChart1.setOption(option1);

        var barGrid={
            left: '3%',
            right: '4%',
            top: '20%',
            bottom: '20%',
            containLabel: true
        }

        $("#btn1").click(function () {
            var val = $("#dateinput").val();
            var day = val.substring(8, 10);
            var url = "realtime/UTD";
            var params={
                "day": day
            }
            //console.log(params);
            var myChart1 = echarts.init(document.getElementById('main1'));
            myChart1.showLoading();

            $.get(url,params,function (result){
                console.log(result);

                option1 = {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            snap: true,
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                        formatter: function (params) {
                            //console.log(params);
                            var firstParams = params[0];
                            var result = "<b>" + firstParams.name + "</b> <br/>";
                            var sum = 0;
                            var flag = false;
                            for(x in params){
                                if(x > 0) flag = true;
                                result += params[x].seriesName + ":" + params[x].value + "<br/>";
                                sum += params[x].value;
                                //console.log(result, sum);
                            }
                            if(flag) result += "总数:" + sum;
                            return result;
                        }
                    },
                    legend: {
                        data: ['非会员', '会员']

                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: dayPerMin
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '非会员',
                            type: 'line',
                            stack: '总量',
                            label: {
                                show: true,
                                position: 'top'
                            },
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: result.cusData
                        },
                        {
                            name: '会员',
                            type: 'line',
                            stack: '总量',
                            label: {
                                show: true,
                                position: 'top'
                            },
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: result.anuData
                        }
                    ],
                    dataZoom : [
                        {
                            type: 'slider',
                            show: true,
                            start: 0,
                            end: 100,
                            handleSize: 8,
                            brushSelect:false
                        },
                        {
                            type: 'inside',
                            start: 0,
                            end: 100
                        }
                    ]
                };

                myChart1.setOption(option1);
                myChart1.hideLoading();

            });
        });

        $("#btn2").click(function () {
            var url = "realtime/USA";
            var val = $("#reservationtime").val();
            var seTime = val.split(" - ");
            //console.log(seTime);
            var params={
                "start": seTime[0],
                "end": seTime[1]
            }
            var myChart2 = echarts.init(document.getElementById('main2'));
            var myChart3 = echarts.init(document.getElementById('main3'));
            var myChart4 = echarts.init(document.getElementById('main4'));

            //显示加载动画
            myChart2.showLoading();
            myChart3.showLoading();
            myChart4.showLoading();
            $.get(url,params,function (result) {
                //console.log(result);
                //console.log(result.sum_triduration[0]);

                option2 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend:{
                        data:['非会员','会员'],
                        top: '10%'
                    },
                    grid: barGrid,
                    yAxis: [
                        {
                            type: 'category',
                            data: ['总骑行时间'],
                            axisTick: {
                                alignWithLabel: true
                            },
                            left:'12%'
                        }
                    ],
                    xAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '非会员',
                            type: 'bar',
                            barWidth: '40%',
                            data: [result.sum_triduration[0]]
                        },
                        {
                            name: '会员',
                            type: 'bar',
                            barWidth: '40%',
                            data: [result.sum_triduration[1]]
                        }
                    ]
                };

                option3 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend:{
                        data:['非会员','会员'],
                        top: '10%'
                    },
                    grid: barGrid,
                    yAxis: [
                        {
                            type: 'category',
                            data: ['平均骑行时间'],
                            axisTick: {
                                alignWithLabel: true
                            },
                            left:'12%'
                        }
                    ],
                    xAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '非会员',
                            type: 'bar',
                            barWidth: '40%',
                            data: [result.avg[0]]
                        },
                        {
                            name: '会员',
                            type: 'bar',
                            barWidth: '40%',
                            data: [result.avg[1]]
                        }
                    ]
                };

                option4 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend:{
                        data:['非会员','会员'],
                        top: '10%'
                    },
                    grid: barGrid,
                    yAxis: [
                        {
                            type: 'category',
                            data: ['用车人数'],
                            axisTick: {
                                alignWithLabel: true
                            },
                            left:'12%'
                        }
                    ],
                    xAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '非会员',
                            type: 'bar',
                            barWidth: '40%',
                            data: [result.sum_num[0]]
                        },
                        {
                            name: '会员',
                            type: 'bar',
                            barWidth: '40%',
                            data: [result.sum_num[1]]
                        }
                    ]
                };
                myChart2.setOption(option2);
                myChart2.hideLoading();
                myChart3.setOption(option3);
                myChart3.hideLoading();
                myChart4.setOption(option4);
                myChart4.hideLoading();

            });
        });

    </script>

    <script>
        $(function () {
            //Initialize Select2 Elements
            $('.select2').select2()

            //Datemask dd/mm/yyyy
            $('#datemask').inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' })
            //Datemask2 mm/dd/yyyy
            $('#datemask2').inputmask('mm/dd/yyyy', { 'placeholder': 'mm/dd/yyyy' })
            //Money Euro
            $('[data-mask]').inputmask()

            //Date range picker
            $('#reservation').daterangepicker()
            //Date range picker with time picker
            $('#reservationtime').daterangepicker({
                "use24hours": true,
                timePicker: true,
                startDate: "2020-06-01 00:00:00",
                endDate: "2020-06-02 00:00:00",
                locale: {
                    format: 'YYYY-MM-DD HH:mm:ss'
                }
            })
            //Date range as a button
            $('#daterange-btn').daterangepicker(
                {
                    ranges   : {
                        'Today'       : [moment(), moment()],
                        'Yesterday'   : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Last 7 Days' : [moment().subtract(6, 'days'), moment()],
                        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                        'This Month'  : [moment().startOf('month'), moment().endOf('month')],
                        'Last Month'  : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                    },
                    startDate: moment().subtract(29, 'days'),
                    endDate  : moment()
                },
                function (start, end) {
                    $('#daterange-btn span').html(start.format('MMMM D, YYYY') + '-' + end.format('MMMM D, YYYY'))
                }
            )

            //Date picker
            $('#datepicker').datepicker({
                autoclose: true
            })

            //iCheck for checkbox and radio inputs
            $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
                checkboxClass: 'icheckbox_minimal-blue',
                radioClass   : 'iradio_minimal-blue'
            })
            //Red color scheme for iCheck
            $('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
                checkboxClass: 'icheckbox_minimal-red',
                radioClass   : 'iradio_minimal-red'
            })
            //Flat red color scheme for iCheck
            $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
                checkboxClass: 'icheckbox_flat-green',
                radioClass   : 'iradio_flat-green'
            })

            //Timepicker
            $('.timepicker').timepicker({
                showInputs: false
            })
        })
    </script>
</body>